<template>
  <h2>vuex</h2>
  <p>{{ count }}</p>
  <button @click="fn">++</button>
</template>

<!-- <script>
// 在组合api里面，没有办法使用辅助函数的
import { computed } from "vue";
import { useStore } from "vuex";
export default {
  setup() {
    // store就是仓库实例
    const store = useStore();
    // const count = store.state.count;
    // 拿仓库的数据必须要使用计算属性
    const count = computed(() => {
      return store.state.count;
    });

    const fn = () => {
      store.commit("add");
    };

    return { count, fn };
  },
};
</script> -->

<script setup>
import { computed } from "vue";
import { useStore } from "vuex";

const store = useStore();
const count = computed(() => {
  return store.state.count;
});

const fn = () => {
  store.commit("add");
};
</script>
